<template>
    <div id="search">
        <header class="header3">
            <router-link to="/home"><span class="left-icon">&lt;</span></router-link>
            <input type="text" name="" ref="products" placeholder="请输入商品名称" @keyup="keyup($event)"/>
        </header>

        <div class="shoplistse">
            <ul>
                <li>分类</li>
                <li>排序</li>
                <li>筛选</li>
            </ul>
            <section class="list clearfix" v-for="item in list">

                <router-link :to="'/detail/'+item._id">

                <div class="list-img"><img :src="'http://127.0.0.1:2000/'+item.img" alt=""/></div>
                <div class="listtxt">
                    <h3>{{item.title}}</h3>
                    <div class="txt1"><img src="../assets/images/start.jpg"/>月售744单</div>
                    <div class="txt2 clearfix">
                        <div class="txt2-money">
                            <span>¥{{item.price}}起送  /</span>
                            <span>配送费¥3 /</span>
                            <span>¥13/人</span>
                        </div>
                        <div class="txt2-time">
                            <span>2.48km</span><span>47分钟</span>
                        </div>
                    </div>
                </div>

                </router-link>

            </section>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'search',
        data(){
            return{
               list:[]
            }
        },
        methods:{
            keyup(e){
                if(e.keyCode==13){
                    var result=this.$refs.products.value;
                    if(result.length!=0){
                        var url="http://127.0.0.1:2000/api/searchproduct";
                        this.$http.post(url,{title:result}).then(function(res){
                            this.list=res.body.result;
                        },function(err){
                            console.log(err);
                        })
                    }else{
                        this.list=[];
                    }
                }
            }
        }
        
    }
</script>